<template>
  <div>
    <el-row>
      <div>
        <div style="display: inline-block">
          <el-button icon="el-icon-back" size="small" style="font-family: Microsoft YaHei" type="text"
                     @click="$router.go(-1)">返回
          </el-button>
        </div>
        <div style="display: inline-block">|</div>
        <div style="display: inline-block;">
          <div style="padding-bottom: 15px;margin-left:10px">
            <span style="font-family: Microsoft YaHei;display: inline-block; font-size: 14px;">试题编辑</span>
          </div>
        </div>
        <div style="border-bottom: solid 1px #C9C9C9;"></div>
      </div>
    </el-row>
    <div :style="{height: CONST.WORKSPACE_HEIGHT - 100 + 'px'}"
         style="width: 59%; padding: 3px; display: inline-block; overflow-x: hidden; float: left;">
      <h3 style="color: green">编辑区</h3>
      <div v-if="exerciseGroup.libFlag" style="margin-top: 10px">
        <div style="font-weight: bold;font-size: 18px">
          <span>关联大纲:</span>
        </div>
        <div style="margin: 10px">
          <el-cascader
            :options="options"
            :props="cascadeProps"
            :value="this.exerciseGroup.examDetailIdArray"
            clearable
            filterable
            placeholder="请选择"
            size="small"
            style="width: 100%;margin-top: 10px"></el-cascader>
        </div>
      </div>
      <div style="color:#666; display: inline-block; ">题型:</div>
      <div style="display: inline-block; ">{{ exerciseGroup.role }}</div>
      <EditExerciseEntry1 v-if="exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_A1"/>
      <EditExerciseEntryB v-else-if="exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_B"/>
      <EditExerciseEntry3 v-else-if="exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_A3
                            || exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_CASE"/>
    </div>

    <div :style="{height: CONST.WORKSPACE_HEIGHT - 100 + 'px'}"
         style="width: 39%; padding: 3px; display: inline-block; overflow-x: hidden; float: left">
      <h3 style="color: green">预览区</h3>
      <div :style="{minHeight: CONST.WORKSPACE_HEIGHT - 170 + 'px'}"
           style="background-color: antiquewhite; ">
        <div style="color:#666; display: inline-block; ">题型: </div>
        <div style="display: inline-block; ">{{ exerciseGroup.role }}</div>
        <PreviewExerciseEntry1 :exerciseGroup="exerciseGroup" v-if="exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_A1"/>
        <PreviewExerciseEntryB :exerciseGroup="exerciseGroup" v-else-if="exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_B"/>
        <PreviewExerciseEntry3 :exerciseGroup="exerciseGroup" v-else-if="exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_A3
                            || exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_CASE"/>
      </div>
    </div>

    <div style="float: right">
      <el-button type="primary" style="margin: 10px; " size="small" @click="updateExerciseGroup">保存</el-button>
    </div>
  </div>
</template>

<script>
  import EditExerciseEntry1 from "./EditExerciseEntry1";
  import PreviewExerciseEntry1 from "./PreviewExerciseEntry1";
  import PreviewExerciseEntryB from "./PreviewExerciseEntryB";
  import EditExerciseEntryB from "./EditExerciseEntryB";
  import EditExerciseEntry3 from "./EditExerciseEntry3";
  import PreviewExerciseEntry3 from "./PreviewExerciseEntry3";
  import {mapState} from "vuex";
  export default {
    name: "EditExerciseGroup",
    components: {
      EditExerciseEntry1,
      EditExerciseEntry3,
      EditExerciseEntryB,
      PreviewExerciseEntry1,
      PreviewExerciseEntry3,
      PreviewExerciseEntryB},
    data() {
      return {
        cascadeProps: {value: 'id', label: 'name', multiple: true, checkStrictly: true, emitPath: false},
        options: []
      }
    },
    computed: {
      ...mapState(['exerciseGroup'])
    },
    methods: {
      updateExerciseGroup() {
        // 整理选项;
        for(let exerciseEntry of this.exerciseGroup.exerciseEntryList) {
          exerciseEntry.role = this.exerciseGroup.role
          for (let i = 0; i < exerciseEntry.choiceArray.length; i++) {
            let choice = exerciseEntry.choiceArray[i]
            let tempDiv = document.createElement('div');
            tempDiv.innerHTML = choice
            if (tempDiv.getElementsByTagName('p').length === 0) {
              exerciseEntry.choiceArray[i] = '<p>' + choice + '</p>'
            }
          }
        }
        // 校验必填项;
        if (!this.checkNonNull()) {
          return;
        }
        let url = 'pmph/action/exerciseBook/updateExerciseGroup'
        if (this.exerciseGroup.libFlag) {
          url = 'pmph/action/exerciseLib/saveOrUpdateExerciseGroupLib'
        }
        this.axios.post(url, this.exerciseGroup)
          .then(() => this.$router.go(-1))
      },
      checkNonNull() {
        let role = this.exerciseGroup.role
        let tempDiv = document.createElement('div')
        if (role === CONST.EXERCISE_GROUP_ROLE_A3 || role === CONST.EXERCISE_GROUP_ROLE_CASE) {
          tempDiv.innerHTML = this.exerciseGroup.caseAlias
          if (UTIL.isBlank(tempDiv.innerText)) {
            this.$message.warning('共用题干(案例)不能为空')
            return false
          }
        }
        if (role === CONST.EXERCISE_GROUP_ROLE_B) {
          for(let choice of this.exerciseGroup.exerciseEntryList[0].choiceArray) {
            tempDiv.innerHTML = choice
            if (UTIL.isBlank(tempDiv.innerText)) {
              this.$message.warning('选项内容不能为空')
              return false
            }
          }
        }
        let exerciseEntryList = this.exerciseGroup.exerciseEntryList
        for(let exerciseEntry of exerciseEntryList) {
          tempDiv.innerHTML = exerciseEntry.question
          if (UTIL.isBlank(tempDiv.innerText)) {
            this.$message.warning('题干不能为空')
            return false
          }
          for(let choice of exerciseEntry.choiceArray) {
            tempDiv.innerHTML = choice
            if (UTIL.isBlank(tempDiv.innerText)) {
              this.$message.warning('选项内容不能为空')
              return false
            }
          }
          if (UTIL.isBlank(exerciseEntry.answer)) {
            this.$message.warning('答案不能为空')
            return false
          }
        }
        return true
      }
    },
    created() {
      // 题库管理  编辑 显示大纲  试题图书不显示大纲
      // 查询大纲
      if (this.exerciseGroup.libFlag) {
        if (UTIL.isNotEmpty(this.exerciseGroup.examDetailId)) {
          this.exerciseGroup.examDetailIdArray = this.exerciseGroup.examDetailId
        }
        this.axios.get('/pmph/action/examBook/selectAllOutlineTree', {}).then((response) => {
          this.options = response.data
        })
      }
    }
  }
</script>

<style scoped>

</style>
